<template>
  <div class="flex h-screen bg-gray-100">
    <!-- Sidebar -->
    <aside class="w-64 bg-white shadow-md hidden md:block flex-shrink-0">
      <div class="p-4">
        <!-- Logo -->
        <div class="flex items-center mb-6">
          <img class="h-8 w-auto mr-2" src="@/assets/logo.svg" alt="HmChat Logo" />
          <span class="text-xl font-semibold text-gray-800">HmChat</span>
        </div>
        <!-- Navigation -->
        <nav v-if="isAuthenticated">
          <ul>
            <li>
              <NuxtLink to="/" class="flex items-center px-3 py-2 text-gray-700 hover:bg-gray-200 rounded-md">
                <!-- Add icon here if desired -->
                <span>首页</span>
              </NuxtLink>
            </li>
            <li>
              <NuxtLink to="/chat" class="flex items-center px-3 py-2 text-gray-700 hover:bg-gray-200 rounded-md mt-1">
                <!-- Add icon here if desired -->
                <span>聊天室</span>
              </NuxtLink>
            </li>
            <li>
              <NuxtLink to="/profile" class="flex items-center px-3 py-2 text-gray-700 hover:bg-gray-200 rounded-md mt-1">
                <!-- Add icon here if desired -->
                <span>个人中心</span>
              </NuxtLink>
            </li>
            <!-- Add more navigation items as needed -->
          </ul>
        </nav>
      </div>
    </aside>

    <!-- Main Content Area -->
    <div class="flex-1 flex flex-col overflow-hidden">
      <!-- Optional Header for Main Content Area -->
      <header class="bg-white shadow-sm md:hidden"> <!-- Mobile Header -->
         <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
           <div class="flex justify-between h-16 items-center">
             <div class="flex-shrink-0">
               <img class="h-8 w-auto" src="@/assets/logo.svg" alt="HmChat Logo" />
             </div>
             <!-- Add mobile menu toggle button here -->
           </div>
         </div>
      </header>

      <!-- Page Content -->
      <main class="flex-1 overflow-x-hidden overflow-y-auto bg-gray-100 p-4 md:p-8">
        <slot /> <!-- NuxtPage content will be rendered here -->
      </main>

       <!-- Optional Footer for Main Content Area -->
       <footer class="bg-white border-t border-gray-200 p-4 text-center text-sm text-gray-600 md:hidden">
         © {{ new Date().getFullYear() }} HmChat.
       </footer>
    </div>
  </div>
</template>

<script setup lang="ts">
// Layout script setup
// You might initialize global things like WebSocket connection here
import { useSocket } from '@/composables/chat/useSocket';
import { onMounted } from 'vue';

const { connect, isConnected } = useSocket();

onMounted(() => {
  // Connect WebSocket when the layout mounts
  // Ensure this logic fits your application's connection strategy
  if (!isConnected.value) {
    connect();
  }
});

</script>

<style scoped>
/* Scoped styles can remain for component-specific adjustments */
/* However, the main layout structure is now handled by Tailwind classes */
</style>